<template>
  <!-- <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
    </div> -->
  <!-- <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker v-model="value2" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" align="right" @change="getTIme"
            value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
    </div> -->
  <!-- Tab切换 type="border-card"-->
  <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="直播" name="0">
      <Content v-if="activeName == 0" />
    </el-tab-pane>
    <el-tab-pane label="短视频" name="1">
      <Video v-if="activeName == 1" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Content from "@/views/keyword/content/index.vue";
import Video from "@/views/keyword/Video/index.vue";

export default {
  components: {
    Video,
    Content,
  },
  data() {
    return {
      activeName: "0",
    };
  },
  mounted() {
    // this.userOrigin()
    // this.handleClick()
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab.index)
      // tab.index 表示当前标签页为多少，这是一个字符串类型
      if (tab.index === "0") {
        // 发起访问第一个数据报表的请求
        this.userOrigin();
      } else if (tab.index === "1") {
        this.pageAccess();
      }
    },
    userOrigin() {
      console.log(0);
    },
    pageAccess() {
      console.log(1);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-tabs__content {
  /* height: 185px;
  border-radius: 4px; */
  background-color: rgb(240, 242, 245) !important; /* 使用你想要的蓝色 */
}
</style>
